<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天与数据展示</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 左侧聊天区域 -->
            <div class="chat-section">
                <div class="chat-header">
                    <h2 class="chat-title">聊天助手</h2>
                    <div class="chat-subtitle">智能对话与数据分析</div>
                </div>
                <div class="chat-history">
                    <div v-for="(message, index) in chatHistory" 
                         :key="index" 
                         class="chat-message"
                         :class="message.isUser ? 'user-message' : 'ai-message'">
                        <div :class="['chat-avatar', message.isUser ? 'user-avatar' : 'ai-avatar']">
                            {{ message.isUser ? '我' : 'AI' }}
                        </div>
                        <div class="chat-content">
                            <!-- 专业加载界面 -->
                            <div v-if="!message.isUser && showLoadingMessage && index === chatHistory.length - 1" class="professional-loading">
                                <div class="loading-icon">
                                    <div class="loading-spinner"></div>
                                </div>
                                <div class="loading-text">智能分析中</div>
                                <div class="loading-subtext">正在处理您的请求，分析数据内容...</div>
                                <div class="loading-progress">
                                    <div class="loading-progress-bar"></div>
                                </div>
                                <div class="loading-status">
                                    <div class="status-dot"></div>
                                    <span>{{ loadingStatusText }}</span>
                                </div>
                            </div>
                            <!-- 普通消息显示 -->
                            <div class="message-text" v-else v-html="processMessageLinks(message.content)"></div>
                        </div>
                    </div>
                    <div v-if="suggestedQuestions.length > 0" class="suggested-questions">
                        <div class="suggested-questions-title">您可以尝试以下问题：</div>
                    </div>
                    <div v-if="loadingSuggestions" class="suggested-questions">
                        <div class="suggested-questions-title">
                            <i class="el-icon-loading"></i> 正在生成建议问题...
                        </div>
                    </div>
                </div>
                <div class="chat-input">
                    <el-input
                        v-model="inputMessage"
                        placeholder="请输入消息"
                        :rows="3"
                        type="textarea"
                        @keyup.enter.native="sendMessage">
                    </el-input>
                    
                    <el-button 
                        :type="isGenerating ? 'warning' : 'primary'" 
                        style="margin-top: 10px; width: 100%;"
                        :loading="loading && !isGenerating"
                        @click="sendMessage">
                        {{ isGenerating ? '停止生成' : '发送' }}
                    </el-button>
                    
                    <!-- 调试按钮 - 显示最后一条AI消息的原始数据 -->
                    <el-button 
                        type="info" 
                        size="small"
                        style="margin-top: 10px; width: 100%;"
                        @click="showLastMessageRawData">
                        显示原始数据日志
                    </el-button>
                </div>
            </div>

            <!-- 右侧数据展示区域 -->
            <div class="display-section">
                <div class="display-header" v-if="dataArray">
                    <h2 class="display-title">{{ inputMessage || '数据可视化' }}</h2>
                    <div class="display-subtitle">实时数据展示与分析</div>
                </div>
                <div class="chart-container">
                    <!-- 原始JSON数据展示 -->
                    <div v-if="dataArray" class="data-cards-container">
                        <div class="data-card" style="grid-column: 1 / -1;" v-for="item in dataArray" :key="item">
                            <div class="data-card-header">
                                <div class="data-card-icon icon-blue">
                                    📊
                                </div>
                                <h3 class="data-card-title">{{ item.name }}</h3>
                            </div>
                            <div style="margin-top: 20px;">
                                    <span class="sub-data-label">数据结果</span>
                                    <span class="sub-data-value">{{ item.value }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态 -->
                    <div v-else class="empty-state">
                        <div class="empty-state-icon">📊</div>
                        <div class="empty-state-text">暂无数据显示</div>
                        <div class="empty-state-subtext">请发送消息获取数据分析结果</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入自定义JavaScript -->
    <script src="app.js"></script>
</body>
</html>
